<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="活动发布"></uni-nav-bar>
		<view class="background"></view>
		<view class="content">
			<!-- 标题输入 -->
			<view class="form-item">
				<view class="">
					标题：
				</view>
				<!-- 绑定输入事件 -->
				<input ref="titleInput" type="text" placeholder="请输入标题" @input="handleTitleInput" />
			</view>
			<!-- 内容输入 -->
			<view class="form-item">
				<view class="">
					内容：
				</view>
				<!-- 绑定输入事件 -->
				<textarea ref="contentTextarea" placeholder="请输入内容" @input="handleContentInput"></textarea>
			</view>
			<!-- 图片/视频上传 -->
			<view class="form-item">
				<view class="">
					图片/视频：
				</view>
				<uni-file-picker style="" limit="1" @change="onFileChange" :image-styles="imageStyles"
					class="upload-picker">
					<view class="upload-content">
						<image src="/static/灰色加号@2x.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
						<view class="upload-text">上传图片/视频</view>
					</view>
				</uni-file-picker>
			</view>
		</view>
		<!-- 发布按钮 -->
		<button class="publish-button" @click="publish">发布</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedMedia: [], // 保存选择的媒体文件临时路径
				titleValue: '',
				contentValue: '',
				imageStyles: {
					width: '200rpx',
					height: '200rpx'
				}
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 处理文件选择事件
			onFileChange(e) {
				this.selectedMedia = e.mp.detail.tempFilePaths;
			},
			// 处理标题输入事件
			handleTitleInput(e) {
				this.titleValue = e.detail.value;
			},
			// 处理内容输入事件
			handleContentInput(e) {
				this.contentValue = e.detail.value;
			},
			// 发布方法
			publish() {
				// 使用 data 中的值
				const title = this.titleValue.trim();
				const content = this.contentValue.trim();

				// 检查标题和内容是否为空
				if (!title || !content) {
					uni.showToast({
						title: '标题和内容不能为空',
						icon: 'none'
					});
					return;
				}

				// 先上传媒体文件
				const uploadPromises = this.selectedMedia.map((filePath, index) => {
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'your_upload_api_url', // 替换为实际的上传接口地址
							filePath: filePath,
							name: `file${index}`,
							success: (res) => {
								const data = JSON.parse(res.data);
								resolve(data);
							},
							fail: (err) => {
								reject(err);
							}
						});
					});
				});

				// 等待所有媒体文件上传完成
				Promise.all(uploadPromises)
					.then((uploadResults) => {
						const mediaUrls = uploadResults.map(result => result.url); // 假设后端返回的文件URL字段为url

						// 打印即将发送到后端的数据
						const dataToSend = {
							title,
							content,
							mediaUrls
						};
						console.log('即将发送到后端的数据:', dataToSend);

						// 发送标题、内容和媒体文件URL到后端
						uni.request({
							url: 'your_publish_api_url', // 替换为实际的发布接口地址
							method: 'POST',
							data: dataToSend,
							success: (res) => {
								console.log('发布成功', res.data);
								uni.showToast({
									title: '发布成功',
									icon: 'success'
								});
							},
							fail: (err) => {
								console.error('发布失败', err);
								uni.showToast({
									title: '发布失败',
									icon: 'none'
								});
							}
						});
					})
					.catch((err) => {
						console.error('媒体文件上传失败', err);
						uni.showToast({
							title: '媒体文件上传失败',
							icon: 'none'
						});
					});
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 150rpx;
	}

	.content {
		top: -110rpx;
		position: relative;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		width: 90%;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		background-color: white;
		padding: 20rpx;
		border-radius: 10rpx;
	}

	input {
		width: 67%;
		padding: 20rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	textarea {
		width: 67%;
		padding: 20rpx;
		border: 1px solid #ccc;
		border-radius: 10rpx;
	}

	:deep(.uni-file-picker) {
		margin-top: 40rpx !important;
	}

	.upload-picker {
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}

	.upload-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.upload-text {
		margin-top: 10px;
		color: #666;
	}

	.publish-button {
		width: 60%;
		background-color: #007aff;
		color: white;
		border: none;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
	}

	::v-deep .file-picker__box-content {
		border: 1rpx solid #ccc !important;
		width: 300rpx;
		height: 175rpx;
	}
</style>